<template>
	<div class="article-edit">
		<el-card class="!border-none" shadow="never">
			<el-page-header :content="$route.meta.title" @back="$router.back()" />
		</el-card>
		<el-tabs class="align-middle" v-model="defaultTab" @tab-change="handleTab">
			<el-form ref="formRef" :model="formData" :rules="rules">
				<el-tab-pane label="产品信息" name="product_info">
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7">基础信息</div>
						<el-form-item label="产品分类" prop="cate_id">
							<div class="w-80">
								<el-select class="w-[280px]" v-model="formData.cate_id">
									<!-- <el-option label="全部" value /> -->
									<el-option v-for="(item) in optionsData.product_cate_list " :label="item.name" :value="item.id" :key="item.id" />
								</el-select>
							</div>
						</el-form-item>
						<el-form-item label="银行" prop="bank_code">
							<div class="w-80">
								<el-select class="w-[280px]" v-model="formData.bank_code">
									<!-- <el-option label="无" value /> -->
									<el-option v-for="(item) in optionsData.bank_list " :label="item.name" :value="item.bank_code" :key="item.id" />
								</el-select>
							</div>
						</el-form-item>
						<el-form-item label="产品名称" prop="name">
							<div class="w-80">
								<el-input v-model="formData.name" placeholder="请输入产品名称" type="text" maxlength="50" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="产品logo" prop="logo">
							<div class="w-80">
								<div>
									<material-picker v-model="formData.logo" :limit="1" />
								</div>
								<div class="form-tips">建议尺寸：240*180px</div>
							</div>
						</el-form-item>
						<el-form-item label="最高额度" prop="quota">
							<div class="w-80">
								<el-input v-model="formData.quota" placeholder="请输入最高额度" type="text" maxlength="255" show-word-limit clearable>
									<template #append>万</template>
								</el-input>
							</div>
						</el-form-item>
						<el-form-item label="授信期限" prop="credit_year">
							<div class="w-80">
								<el-select class="w-[280px]" multiple v-model="formData.credit_year">
									<!-- <el-option label="全部" value /> -->
									<!-- 1个月、2个月、3个月、6个月、1年、2年、3年、5年、10年、20年、30年 -->
									<el-option label="1个月" value="1" key="1" />
									<el-option label="2个月" value="2" key="2" />
									<el-option label="3个月" value="3" key="3" />
									<el-option label="6个月" value="6" key="6" />
									<el-option label="1年" value="12" key="12" />
									<el-option label="2年" value="24" key="24" />
									<el-option label="3年" value="36" key="36" />
									<el-option label="5年" value="60" key="60" />
									<el-option label="10年" value="120" key="120" />
									<el-option label="20年" value="240" key="240" />
									<el-option label="30年" value="360" key="360" />
								</el-select>
							</div>
						</el-form-item>
						<el-form-item label="利率类型" prop="rate_type">
							<div class="w-80">
								<el-select class="w-[280px]" v-model="formData.rate_type">
									<el-option label="年化利率" :value="1" :key="1" />
									<el-option label="日化利率" :value="2" :key="2" />
								</el-select>
							</div>
						</el-form-item>
						<el-form-item label="最低利率" prop="rate_start">
							<div class="w-80">
								<el-input v-model="formData.rate_start" placeholder="请输入最低利率" type="text" maxlength="255" clearable>
									<template #append>{{formData.rate_type==2?'‰':formData.rate_type==1?'%':''}}</template>
								</el-input>
							</div>
						</el-form-item>
						<el-form-item label="最高利率" prop="rate_end">
							<div class="w-80">
								<el-input v-model="formData.rate_end" placeholder="请输入最高利率" type="text" maxlength="255" clearable>
									<template #append>{{formData.rate_type==2?'‰':formData.rate_type==1?'%':''}}</template>
								</el-input>
							</div>
						</el-form-item>
						<el-form-item label="还款方式" prop="repayment_type">
							<div class="w-80">
								<el-select class="w-[280px]" multiple v-model="formData.repayment_type">
									<!-- 等额本息、等额本金、先息后本、一次性还本付息 -->
									<el-option label="先息后本" value="1" key="1" />
									<el-option label="等额本息" value="2" key="2" />
									<el-option label="等额本金" value="3" key="3" />
									<el-option label="一次性还本付息" value="4" key="4" />
									<el-option label="随借随还" value="5" key="5" />
								</el-select>
							</div>
						</el-form-item>
					</el-card>
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7">准入区域</div>
						<el-form-item label="准入区域" prop="access_area_ids">
							<div class="w-80" v-if="optionsData.next_area_list.length>0">
								<el-checkbox-group v-model="formData.access_area_ids">
									<el-checkbox v-for="item in optionsData.next_area_list" :label="item.ID" :value="item.ID" :key="item.ID">
										<!--               >2.6版本才能用 value属性-->
										<!--                  <el-checkbox  v-for="item in optionsData.next_area_list" :label="item.ID" :value="item.ID" :key="item.ID">-->
										{{item.Name}}
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</el-form-item>
					</el-card>
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7">申请人要求</div>
						<el-form-item label="最低年龄" prop="age_start">
							<div class="w-80">
								<el-input v-model="formData.age_start" placeholder="请输入最低年龄" type="text" maxlength="255" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item label="最高年龄" prop="age_end">
							<div class="w-80">
								<el-input v-model="formData.age_end" placeholder="请输入最高年龄" type="text" maxlength="255" show-word-limit clearable />
							</div>
						</el-form-item>
						<el-form-item v-for="(domain, index) in dynamicFormItems.apply_person_requirements" :key="domain.key" :label="'第' + (index+1) +'条'" :prop="'apply_person_requirements.' + index + '.value'">
							<el-input v-model="domain.value" />
							<el-button class="mt-2" @click.prevent="removeApplyPersonRequirementFormItem(domain)"> 删除 </el-button> 
						</el-form-item>
						<el-button @click="addApplyPersonRequirementFormItem"> 添加 </el-button>
					</el-card> 
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7">企业要求</div>
						<el-form-item v-for="(domain, index) in dynamicFormItems.company_requirements" :key="domain.key" :label="'第' + (index+ 1)+'条'" :prop="'company_requirements.' + index + '.value'">
							<el-input v-model="domain.value" />
							<el-button class="mt-2" @click.prevent="removeCompanyRequirementFormItem(domain)"> 删除 </el-button> 
						</el-form-item>
						<el-button @click="addCompanyRequirementFormItem"> 添加 </el-button>
					</el-card> 
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7">抵押物要求</div> 
						<el-form-item label="房屋类型" prop="house_type_arr">
							<div class="w-80">
								<!-- <el-radio-group v-model="formData.house_type">
									<el-radio :label="1">住宅</el-radio>
									<el-radio :label="2">公寓</el-radio>
									<el-radio :label="3">写字楼</el-radio>
								</el-radio-group> -->
								<el-checkbox-group v-model="formData.house_type_arr">
									<el-checkbox label="1" value="1">住宅</el-checkbox>
									<el-checkbox label="2" value="2">公寓</el-checkbox>
									<el-checkbox label="3" value="3">写字楼</el-checkbox>
								</el-checkbox-group>
							</div>
						</el-form-item>
						<el-form-item v-for="(domain, index) in dynamicFormItems.collateral_requirements" :key="domain.key" :label="'第' + (index+1)+'条'" :prop="'collateral_requirements.' + index + '.value'">
							<el-input v-model="domain.value" />
							<el-button class="mt-2" @click.prevent="removeCollateralRequirementFormItem(domain)"> 删除 </el-button> 
						</el-form-item>
						<el-button @click="addCollateralRequirementFormItem"> 添加 </el-button>
					</el-card> 
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7">征信要求</div>
						<el-form-item v-for="(domain, index) in dynamicFormItems.credit_requirements" :key="domain.key" :label="'第' + (index+1)+'条'" :prop="'credit_requirements.' + index + '.value'">
							<el-input v-model="domain.value" />
							<el-button class="mt-2" @click.prevent="removeCreditRequirementFormItem(domain)"> 删除 </el-button>
						</el-form-item>
						<el-button @click="addCreditRequirementFormItem"> 添加 </el-button>
					</el-card> 
					<el-card class="!border-none mt-4" shadow="never">
						<div class="font-medium mb-7"> 其他</div>
						<el-form-item v-for="(domain, index) in dynamicFormItems.other_requirements" :key="domain.key" :label="'第' + (index+1)+'条'" :prop="'other_requirements.' + index + '.value'">
							<!-- <el-input v-model="domain.value" /> -->
							<el-input v-model="domain.value" placeholder="请输入" type="text" maxlength="300" show-word-limit clearable />
							<el-button class="mt-2" @click.prevent="removeOtherRequirementFormItem(domain)"> 删除 </el-button> 
						</el-form-item>
						<el-button @click="addOtherRequirementFormItem"> 添加 </el-button>
					</el-card> 
					<el-form-item label="上架状态" prop="is_online">
						<div class="w-80">
							<el-radio-group v-model="formData.is_online">
								<!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
								<!--              <el-radio value="Value 1">Option 1</el-radio>-->
								<el-radio :label="1">上架</el-radio>
								<el-radio :label="0">下架</el-radio>
							</el-radio-group>
						</div>
					</el-form-item>
				</el-tab-pane>
				<el-tab-pane label="关联渠道" name="relate_channel">
					<table class="dataTable" border="0" cellspacing="0">
						<tbody>
							<tr>
								<th>序号</th>
								<th>姓名</th>
								<th>头像</th>
								<th>职务</th>
								<th>微信</th>
								<th>电话</th>
								<th>公司</th>
								<th>地址</th>
								<th>主营业务</th>
								<th>操作</th>
							</tr>
							<template v-for="(item,index) in formData.join_channel_arr">
								<tr v-if="item.type!='del'" :key="'join_channel_arr'+index">
									<td>{{item.id}}</td>
									<td>{{item.real_name}}</td>
									<td>
										<el-avatar :src="[item.avator]" :size="58" />
									</td>
									<td>{{item.position}}</td>
									<td>{{item.wechat_no}}</td>
									<td>{{item.account}}</td>
									<td>{{item.company_name}}</td>
									<td>{{item.company_address}}</td>
									<td>
										<span v-for="(child,i) in item.product_cate_arr" :key="'product_cate_arr'+i">{{child.name}}、</span>
									</td>
									<td>
										<el-button type="danger" link @click="deleteChannelItem(1,index,item)">删除</el-button>
									</td>
								</tr>
							</template>
							<tr v-for="(item,index) in formData.join_channel_arr2" :key="'join_channel_arr2'+index">
								<td>{{item.id}}</td>
								<td>{{item.real_name}}</td>
								<td>
									<el-avatar :src="[item.avator]" :size="58" />
								</td>
								<td>{{item.position}}</td>
								<td>{{item.wechat_no}}</td>
								<td>{{item.account}}</td>
								<td>{{item.company_name}}</td>
								<td>{{item.company_address}}</td>
								<td>
									<span v-for="(child,i) in item.product_cate_arr" :key="'product_cate_arr'+i">{{child.name}}、</span>
								</td>
								<td>
									<el-button type="danger" link @click="deleteChannelItem(2,index,item)">删除</el-button>
								</td>
							</tr>
							<template v-if="formData.join_channel_arr.length==0&&formData.join_channel_arr2.length==0">
								<tr>
									<td :colspan="10" style="text-align: center; color: red;">暂无数据</td>
								</tr>
							</template>
						</tbody>
					</table>
					<el-button type="primary" @click="channelAdd(formData.join_channel_arr2)" class="mb-4" style="display: block; margin: 24px auto;">
						<template #icon>
							<icon name="el-icon-Plus"/>
						</template>
						<span>添加渠道</span>
					</el-button>
				</el-tab-pane>
				<!-- <el-tab-pane label="收佣标准" name="commission_standard">
					<el-form-item label="收佣比例" prop="commission_rate">
						<div class="w-80">
							<el-input v-model="formData.commission_rate" placeholder="请输入佣金比例" type="text" maxlength="255" clearable>
								<template #append>%</template>
							</el-input>
						</div>
					</el-form-item>
				</el-tab-pane> -->
			</el-form>
		</el-tabs>
		<footer-btns>
			<el-button type="primary" @click="handleSave" v-prevent-reclick="3000">保存</el-button>
		</footer-btns>
		<!-- <channel-popup v-if="showChannel" ref="channelRef" @success="getChannel" @close="showChannel = false" /> -->
	</div>
</template>

<script lang="ts" setup name="productListsEdit">
	import type { FormInstance } from 'element-plus';
	import { productDetail, productEdit, productAdd, productCate } from '@/api/product/product';
	import { getNextLevelAreaList, getBankList } from "@/api/app";
	import useMultipleTabs from '@/hooks/useMultipleTabs';
	import { getRoutePath } from "@/router";
	import { useDictOptions } from "@/hooks/useDictOptions";
	import { toRaw, shallowRef } from "vue";
	
	// import ChannelPopup from './channel.vue';
	// const channelRef = shallowRef<InstanceType<typeof ChannelPopup>>()
	const showChannel = ref(false)
	const channelAdd = async (ids?: any) => {
	    showChannel.value = true
	    await nextTick()
	    if (ids) {
	        channelRef.value?.setFormData({
	            pid: ids
	        })
	    }
	    channelRef.value?.open('add')
	}
	const getChannel = (val:any)=>{
		console.log(val);
		// formData.join_channel_arr2 = val.map((item:any)=>{
		// 	item.type = 'add';
		// 	return item;
		// });
		val.forEach((item:any)=>{
			item.type = 'add';
			let isAdd = true;
			formData.join_channel_arr.forEach((child)=>{
				if( child.id==item.id&&child.type!='del' ){
					isAdd = false;
				}
			});
			formData.join_channel_arr2.forEach((child)=>{
				if( child.id==item.id ){
					isAdd = false;
				}
			});
			if( isAdd ){
				formData.join_channel_arr2.push(item);
			}
		})
	}
	const deleteChannelItem = (type:number,i:number,item:any)=>{
		if( type==1 ){
			item.type = 'del';
		}else{
			formData.join_channel_arr2.splice(i,1);
		}
	}
	const route = useRoute();
	const router = useRouter();
	const formData = reactive({
		id: '',
		cate_id: '',
		bank_code: '',
		name: '',
		logo: '',
		quota: '',
		credit_year: [],
		rate_type: 1,
		rate_start: '',
		rate_end: '',
		repayment_type: [],
		access_area_ids: [],
		access_area: [],
		age_start: '',
		age_end: '',
		house_type: 1,
		house_type_arr: [],
		/* apply_person_requirement: dynamicFormItems.apply_person_requirements,
		 company_requirement: dynamicFormItems.company_requirements,
		 collateral_requirement: dynamicFormItems.collateral_requirements,
		 credit_requirement: dynamicFormItems.credit_requirements,
		 other_requirement: dynamicFormItems.other_requirements,*/
		apply_person_requirement: [],
		company_requirement: [],
		collateral_requirement: [],
		credit_requirement: [],
		other_requirement: [],
		is_online: 1,
		commission_rate: 0,
		join_channel_arr: [],
		join_channel_arr2: []
	})
	const { removeTab } = useMultipleTabs()
	const formRef = shallowRef<FormInstance>()
	const rules = reactive({
		cate_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
		bank_code: [{ required: true, message: '请选择银行', trigger: 'blur' }],
		name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
		logo: [{ required: true, message: '请选择logo', trigger: 'blur' }],
		quota: [{ required: true, message: '请填写最够额度', trigger: 'blur' }],
		credit_year: [{ required: true, message: '请选择授信期限', trigger: 'blur' }],
		rate_type: [{ required: true, message: '选择利率类型', trigger: 'blur' }],
		rate_start: [{ required: true, message: '请输入最低利率', trigger: 'blur' }],
		rate_end: [{ required: true, message: '请输入最高利率', trigger: 'blur' }],
		repayment_type: [{ required: true, message: '请选择还款方式', trigger: 'blur' }],
		access_area_ids: [{ required: true, message: '请选择准入区域', trigger: 'blur' }],
		age_start: [{ required: true, message: '请输入最低年龄', trigger: 'blur' }],
		age_end: [{ required: true, message: '请输入最高年龄', trigger: 'blur' }],
		/*apply_person_requirement: [{required: true, message: '请选择VR文件', trigger: 'blur'}],*/
		/*  company_requirement: [{required: true, message: '请选择VR文件', trigger: 'blur'}],*/
		/*  collateral_requirement: [{required: true, message: '请选择VR文件', trigger: 'blur'}],*/
		/* credit_requirement: [{required: true, message: '请选择VR文件', trigger: 'blur'}],*/
		is_online: [{ required: true, message: '请选择上架状态', trigger: 'blur' }],
		// commission_rate: [{ required: true, message: '请填写收佣比例', trigger: 'blur' }],
	})
	const defaultTab = ref('product_info')
	const getDetails = async () => {
		const data = await productDetail({
			id: route.query.id
		})
		console.log(data,999);
		data.join_channel_arr2 = [];
		Object.keys(formData).forEach((key) => {
			//@ts-ignore
			formData[key] = data[key]
			dynamicFormItems[key + 's'] = data[key]
			if (key == 'commission_rate') {
				formData[key] = (data[key] * 100)
			}
			if (key == "rate_start" || key == 'rate_end') {
				if( data.rate_type==1 ){
					formData[key] = (data[key] * 100)
				}else if( data.rate_type==2 ){
					formData[key] = (data[key] * 1000)
				}
			}
		})
	}
	const { optionsData } = useDictOptions<{
		next_area_list : any[],
		product_cate_list : any[],
		bank_list : any[],
	}>({
		next_area_list: {
			api: getNextLevelAreaList
		},
		product_cate_list: {
			api: productCate
		},
		bank_list: {
			api: getBankList
		}
	})
	//动态添加和删除input表单项
	interface DomainItem {
		key : number
		value : string
	}
	const dynamicFormItems = reactive<{
		"apply_person_requirements" : DomainItem[]
		"company_requirements" : DomainItem[]
		"collateral_requirements" : DomainItem[]
		"credit_requirements" : DomainItem[]
		"other_requirements" : DomainItem[]
	}>({
		apply_person_requirements: [
			{
				key: 1,
				value: ''
			}
		],
		company_requirements: [
			{
				key: 1,
				value: ''
			}
		],
		collateral_requirements: [
			{
				key: 1,
				value: ''
			}
		],
		credit_requirements: [
			{
				key: 1,
				value: ''
			}
		],
		other_requirements: [
			{
				key: 1,
				value: ''
			}
		],

	})
	//添加申请人表单项
	const addApplyPersonRequirementFormItem = () => {
		dynamicFormItems.apply_person_requirements.push({
			key: Date.now(),
			value: ''
		})
	}
	//删除申请人表单项
	const removeApplyPersonRequirementFormItem = (item : DomainItem) => {
		const index = dynamicFormItems.apply_person_requirements.indexOf(item)
		if (index !== -1) {
			dynamicFormItems.apply_person_requirements.splice(index, 1)
		}
	}
	//添加企业要求表单项
	const addCompanyRequirementFormItem = () => {
		dynamicFormItems.company_requirements.push({
			key: Date.now(),
			value: ''
		})
	}
	//删除企业要求表单项
	const removeCompanyRequirementFormItem = (item : DomainItem) => {
		const index = dynamicFormItems.company_requirements.indexOf(item)
		if (index !== -1) {
			dynamicFormItems.company_requirements.splice(index, 1)
		}
	}
	//添加抵押物要求表单项
	const addCollateralRequirementFormItem = () => {
		dynamicFormItems.collateral_requirements.push({
			key: Date.now(),
			value: ''
		})
	}
	//删除抵押物要求表单项
	const removeCollateralRequirementFormItem = (item : DomainItem) => {
		const index = dynamicFormItems.collateral_requirements.indexOf(item)
		if (index !== -1) {
			dynamicFormItems.collateral_requirements.splice(index, 1)
		}
	}
	//添加征信要求表单项
	const addCreditRequirementFormItem = () => {
		dynamicFormItems.credit_requirements.push({
			key: Date.now(),
			value: ''
		})
	}
	//删除其他要求表单项
	const removeCreditRequirementFormItem = (item : DomainItem) => {
		const index = dynamicFormItems.credit_requirements.indexOf(item)
		if (index !== -1) {
			dynamicFormItems.credit_requirements.splice(index, 1)
		}
	}
	//添加其他要求表单项
	const addOtherRequirementFormItem = () => {
		dynamicFormItems.other_requirements.push({
			key: Date.now(),
			value: ''
		})
	}
	//删除其他要求表单项
	const removeOtherRequirementFormItem = (item : DomainItem) => {
		const index = dynamicFormItems.other_requirements.indexOf(item)
		if (index !== -1) {
			dynamicFormItems.other_requirements.splice(index, 1)
		}
	}
	const handleSave = async () => {
		await formRef.value?.validate()
		formData.apply_person_requirement = convertRequireMenstsValue(dynamicFormItems.apply_person_requirements)
		formData.company_requirement = convertRequireMenstsValue(dynamicFormItems.company_requirements)
		formData.collateral_requirement = convertRequireMenstsValue(dynamicFormItems.collateral_requirements)
		formData.credit_requirement = convertRequireMenstsValue(dynamicFormItems.credit_requirements)
		formData.other_requirement = convertRequireMenstsValue(dynamicFormItems.other_requirements)
		formData.access_area = convertAreaIdsToAccessArea(formData.access_area_ids)
		formData.commission_rate = (formData.commission_rate / 100).toFixed(4)
		if( formData.rate_type==1 ){
			formData.rate_start = (formData.rate_start / 100).toFixed(4)
			formData.rate_end = (formData.rate_end / 100).toFixed(4)
		}else if( formData.rate_type==2 ){
			formData.rate_start = (formData.rate_start / 1000).toFixed(4)
			formData.rate_end = (formData.rate_end / 1000).toFixed(4)
		}
		let params = JSON.parse(JSON.stringify(formData));
		
		params.credit_year = formData.credit_year.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
		console.log(params.credit_year); 
		
		params.join_channel_arr = [];
		formData.join_channel_arr.forEach((item:any)=>{
			if(item.type=='del'){
				params.join_channel_arr.push({channel_id:item.id,action:'del'});
			}
		})
		formData.join_channel_arr2.forEach((item:any)=>{
			let isAdd = true;
			params.join_channel_arr.forEach((child:any,i:number)=>{
				if( child.channel_id==item.id ){
					params.join_channel_arr.splice(i,1);
					isAdd = false;
				}
			})
			if( isAdd ){
				params.join_channel_arr.push({channel_id:item.id,action:'add'});
			}
		})
		if (route.query.id) {
			await productEdit(params)
		} else {
			await productAdd(params)
		}
		removeTab()
		router.back()
	}
	const convertRequireMenstsValue = (items : DomainItem[]) => {
		const arr = []
		items.forEach((item) => {
			arr.push(item.value)
		})
		return arr
	}
	const convertAreaIdsToAccessArea = (items : any[]) => {
		const arr = []
		items.forEach((item) => {
			arr.push({ "area_id": item })
		})
		return arr
	}
	const handleTab = (val:any)=>{
		console.log(val,123);
	}
	route.query.id && getDetails()
</script>
<style scoped lang="scss">
	// .dataTable {
	// 	width: 100%;
	// 	line-height: 40px;
	// 	text-align: left;
	// 	border-top: 1px solid #eaeaea;
	// 	border-left: 1px solid #eaeaea;
	// 	border-right: 1px solid #eaeaea;

	// 	tr {
	// 		// display: flex;

	// 		th {
	// 			flex: 1;
	// 			min-height: 40px;
	// 			padding: 0 16px;
	// 			font-weight: 500;
	// 			font-size: 12px;
	// 			color: #fff;
	// 			// background: #f9f8f8;
	// 			border-bottom: 1px solid #eaeaea;
	// 			border-right: 1px solid #eaeaea;
	// 		}

	// 		td {
	// 			flex: 1;
	// 			min-height: 40px;
	// 			padding: 0 16px;
	// 			font-size: 12px;
	// 			color: #666;
	// 			border-bottom: 1px solid #eaeaea;
	// 			border-right: 1px solid #eaeaea;
	// 		}
	// 	}
	// }
</style>